<!DOCTYPE html>
<html>
  <head>
    <title>Form styles and features | Flatty - Flat Administration Template</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <meta content='text/html;charset=utf-8' http-equiv='content-type'>
    <meta content='Flat administration template for Twitter Bootstrap. Twitter Bootstrap 3 template with Ruby on Rails support.' name='description'>
    <link href='assets/images/meta_icons/favicon.ico' rel='shortcut icon' type='image/x-icon'>
    <link href='assets/images/meta_icons/apple-touch-icon.png' rel='apple-touch-icon-precomposed'>
    <link href='assets/images/meta_icons/apple-touch-icon-57x57.png' rel='apple-touch-icon-precomposed' sizes='57x57'>
    <link href='assets/images/meta_icons/apple-touch-icon-72x72.png' rel='apple-touch-icon-precomposed' sizes='72x72'>
    <link href='assets/images/meta_icons/apple-touch-icon-114x114.png' rel='apple-touch-icon-precomposed' sizes='114x114'>
    <link href='assets/images/meta_icons/apple-touch-icon-144x144.png' rel='apple-touch-icon-precomposed' sizes='144x144'>
    <!-- / START - page related stylesheets [optional] -->
    <link href="assets/stylesheets/plugins/datatables/bootstrap-datatable.css" media="all" rel="stylesheet" type="text/css" />
    <!-- / END - page related stylesheets [optional] -->
    <!-- / bootstrap [required] -->
    <link href="assets/stylesheets/bootstrap/bootstrap.css" media="all" rel="stylesheet" type="text/css" />
    <!-- / theme file [required] -->
    <link href="assets/stylesheets/light-theme.css" media="all" id="color-settings-body-color" rel="stylesheet" type="text/css" />
    <!-- / coloring file [optional] (if you are going to use custom contrast color) -->
    <link href="assets/stylesheets/theme-colors.css" media="all" rel="stylesheet" type="text/css" />
    <!-- / demo file [not required!] -->
    <link href="assets/stylesheets/demo.css" media="all" rel="stylesheet" type="text/css" />
    <!--[if lt IE 9]>
      <script src="assets/javascripts/ie/html5shiv.js" type="text/javascript"></script>
      <script src="assets/javascripts/ie/respond.min.js" type="text/javascript"></script>
    <![endif]-->
  </head>
  <body class='contrast-red '>
    <header>
      <nav class='navbar navbar-default'>
        <a class='navbar-brand' href='index.html'>
          <img width="81" height="21" class="logo" alt="Flatty" src="assets/images/logo.svg" />
          <img width="21" height="21" class="logo-xs" alt="Flatty" src="assets/images/logo_xs.svg" />
        </a>
        <a class='toggle-nav btn pull-left' href='#'>
          <i class='icon-reorder'></i>
        </a>
        <ul class='nav'>
          <li class='dropdown light only-icon'>
            <a class='dropdown-toggle' data-toggle='dropdown' href='#'>
              <i class='icon-cog'></i>
            </a>
            <ul class='dropdown-menu color-settings'>
              <li class='color-settings-body-color'>
                <div class='color-title'>Body color</div>
                <a data-change-to='assets/stylesheets/light-theme.css' href='#'>
                  Light
                  <small>(default)</small>
                </a>
                <a data-change-to='assets/stylesheets/dark-theme.css' href='#'>
                  Dark
                </a>
                <a data-change-to='assets/stylesheets/dark-blue-theme.css' href='#'>
                  Dark blue
                </a>
              </li>
              <li class='divider'></li>
              <li class='color-settings-contrast-color'>
                <div class='color-title'>Contrast color</div>
                            <a data-change-to="contrast-red" href="#"><i class='icon-cog text-red'></i>
                Red
                <small>(default)</small>
                </a>
    
                            <a data-change-to="contrast-blue" href="#"><i class='icon-cog text-blue'></i>
                Blue
                </a>
    
                            <a data-change-to="contrast-orange" href="#"><i class='icon-cog text-orange'></i>
                Orange
                </a>
    
                            <a data-change-to="contrast-purple" href="#"><i class='icon-cog text-purple'></i>
                Purple
                </a>
    
                            <a data-change-to="contrast-green" href="#"><i class='icon-cog text-green'></i>
                Green
                </a>
    
                            <a data-change-to="contrast-muted" href="#"><i class='icon-cog text-muted'></i>
                Muted
                </a>
    
                            <a data-change-to="contrast-fb" href="#"><i class='icon-cog text-fb'></i>
                Facebook
                </a>
    
                            <a data-change-to="contrast-dark" href="#"><i class='icon-cog text-dark'></i>
                Dark
                </a>
    
                            <a data-change-to="contrast-pink" href="#"><i class='icon-cog text-pink'></i>
                Pink
                </a>
    
                            <a data-change-to="contrast-grass-green" href="#"><i class='icon-cog text-grass-green'></i>
                Grass green
                </a>
    
                            <a data-change-to="contrast-sea-blue" href="#"><i class='icon-cog text-sea-blue'></i>
                Sea blue
                </a>
    
                            <a data-change-to="contrast-banana" href="#"><i class='icon-cog text-banana'></i>
                Banana
                </a>
    
                            <a data-change-to="contrast-dark-orange" href="#"><i class='icon-cog text-dark-orange'></i>
                Dark orange
                </a>
    
                            <a data-change-to="contrast-brown" href="#"><i class='icon-cog text-brown'></i>
                Brown
                </a>
    
              </li>
            </ul>
          </li>
          <li class='dropdown medium only-icon widget'>
            <a class='dropdown-toggle' data-toggle='dropdown' href='#'>
              <i class='icon-rss'></i>
              <div class='label'>5</div>
            </a>
            <ul class='dropdown-menu'>
              <li>
                <a href='#'>
                  <div class='widget-body'>
                    <div class='pull-left icon'>
                      <i class='icon-user text-success'></i>
                    </div>
                    <div class='pull-left text'>
                      John Doe signed up
                      <small class='text-muted'>just now</small>
                    </div>
                  </div>
                </a>
              </li>
              <li class='divider'></li>
              <li>
                <a href='#'>
                  <div class='widget-body'>
                    <div class='pull-left icon'>
                      <i class='icon-inbox text-error'></i>
                    </div>
                    <div class='pull-left text'>
                      New Order #002
                      <small class='text-muted'>3 minutes ago</small>
                    </div>
                  </div>
                </a>
              </li>
              <li class='divider'></li>
              <li>
                <a href='#'>
                  <div class='widget-body'>
                    <div class='pull-left icon'>
                      <i class='icon-comment text-warning'></i>
                    </div>
                    <div class='pull-left text'>
                      America Leannon commented Flatty with veeery long text.
                      <small class='text-muted'>1 hour ago</small>
                    </div>
                  </div>
                </a>
              </li>
              <li class='divider'></li>
              <li>
                <a href='#'>
                  <div class='widget-body'>
                    <div class='pull-left icon'>
                      <i class='icon-user text-success'></i>
                    </div>
                    <div class='pull-left text'>
                      Jane Doe signed up
                      <small class='text-muted'>last week</small>
                    </div>
                  </div>
                </a>
              </li>
              <li class='divider'></li>
              <li>
                <a href='#'>
                  <div class='widget-body'>
                    <div class='pull-left icon'>
                      <i class='icon-inbox text-error'></i>
                    </div>
                    <div class='pull-left text'>
                      New Order #001
                      <small class='text-muted'>1 year ago</small>
                    </div>
                  </div>
                </a>
              </li>
              <li class='widget-footer'>
                <a href='#'>All notifications</a>
              </li>
            </ul>
          </li>
          <li class='dropdown dark user-menu'>
            <a class='dropdown-toggle' data-toggle='dropdown' href='#'>
              <img width="23" height="23" alt="Mila Kunis" src="assets/images/avatar.jpg" />
              <span class='user-name'>Mila Kunis</span>
              <b class='caret'></b>
            </a>
            <ul class='dropdown-menu'>
              <li>
                <a href='user_profile.html'>
                  <i class='icon-user'></i>
                  Profile
                </a>
              </li>
              <li>
                <a href='user_profile.html'>
                  <i class='icon-cog'></i>
                  Settings
                </a>
              </li>
              <li class='divider'></li>
              <li>
                <a href='sign_in.html'>
                  <i class='icon-signout'></i>
                  Sign out
                </a>
              </li>
            </ul>
          </li>
        </ul>
        <form action='search_results.html' class='navbar-form navbar-right hidden-xs' method='get'>
          <button class='btn btn-link icon-search' name='button' type='submit'></button>
          <div class='form-group'>
            <input value="" class="form-control" placeholder="Search..." autocomplete="off" id="q_header" name="q" type="text" />
          </div>
        </form>
      </nav>
    </header>
    <div id='wrapper'>
      <div id='main-nav-bg'></div>
      <nav id='main-nav'>
        <div class='navigation'>
          <div class='search'>
            <form action='search_results.html' method='get'>
              <div class='search-wrapper'>
                <input value="" class="search-query form-control" placeholder="Search..." autocomplete="off" name="q" type="text" />
                <button class='btn btn-link icon-search' name='button' type='submit'></button>
              </div>
            </form>
          </div>
          <ul class='nav nav-stacked'>
            <li class=''>
              <a href='index.html'>
                <i class='icon-dashboard'></i>
                <span>Dashboard</span>
              </a>
            </li>
            <li class=''>
                      <a class="dropdown-collapse" href="#"><i class='icon-edit'></i>
              <span>Forms</span>
              <i class='icon-angle-down angle-down'></i>
              </a>
      
              <ul class='nav nav-stacked'>
                <li class=''>
                  <a href='form_styles.html'>
                    <i class='icon-caret-right'></i>
                    <span>Form styles and features</span>
                  </a>
                </li>
                <li class=''>
                  <a href='form_components.html'>
                    <i class='icon-caret-right'></i>
                    <span>Form components</span>
                  </a>
                </li>
                <li class=''>
                  <a href='validations.html'>
                    <i class='icon-caret-right'></i>
                    <span>Validations</span>
                  </a>
                </li>
                <li class=''>
                  <a href='wizard.html'>
                    <i class='icon-caret-right'></i>
                    <span>Wizard</span>
                  </a>
                </li>
              </ul>
            </li>
            <li>
              <a class='dropdown-collapse ' href='#'>
                <i class='icon-tint'></i>
                <span>UI Elements & Widgets</span>
                <i class='icon-angle-down angle-down'></i>
              </a>
              <ul class='nav nav-stacked'>
                <li class=''>
                  <a href='ui_elements.html'>
                    <i class='icon-caret-right'></i>
                    <span>UI Elements</span>
                  </a>
                </li>
                <li class=''>
                  <a href='widgets.html'>
                    <i class='icon-caret-right'></i>
                    <span>Widgets</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class=''>
              <a href='buttons_and_icons.html'>
                <i class='icon-star'></i>
                <span>Buttons & Icons</span>
              </a>
            </li>
            <li>
              <a class='dropdown-collapse ' href='#'>
                <i class='icon-cogs'></i>
                <span>Components</span>
                <i class='icon-angle-down angle-down'></i>
              </a>
              <ul class='nav nav-stacked'>
                <li class=''>
                  <a href='charts.html'>
                    <i class='icon-bar-chart'></i>
                    <span>Charts</span>
                  </a>
                </li>
                <li class=''>
                  <a href='address_book.html'>
                    <i class='icon-envelope'></i>
                    <span>Address book</span>
                  </a>
                </li>
                <li class=''>
                  <a href='chats.html'>
                    <i class='icon-comments'></i>
                    <span>Chats</span>
                  </a>
                </li>
                <li class=''>
                  <a href='filetrees.html'>
                    <i class='icon-list-ul'></i>
                    <span>File trees</span>
                  </a>
                </li>
                <li class=''>
                  <a href='fileupload.html'>
                    <i class='icon-file'></i>
                    <span>Fileupload</span>
                  </a>
                </li>
                <li class=''>
                  <a href='todo.html'>
                    <i class='icon-list-alt'></i>
                    <span>Todo list</span>
                  </a>
                </li>
                <li class=''>
                  <a href='wysiwyg.html'>
                    <i class='icon-paste'></i>
                    <span>WYSIWYG</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class='active'>
              <a href='tables.html'>
                <i class='icon-table'></i>
                <span>Tables</span>
              </a>
            </li>
            <li class=''>
              <a href='grid.html'>
                <i class='icon-th'></i>
                <span>Grid</span>
              </a>
            </li>
            <li class=''>
              <a href='type.html'>
                <i class='icon-font'></i>
                <span>Typography</span>
              </a>
            </li>
            <li class=''>
              <a href='calendar.html'>
                <i class='icon-calendar'></i>
                <span>Calendar</span>
              </a>
            </li>
            <li>
              <a class='dropdown-collapse ' href='#'>
                <i class='icon-book'></i>
                <span>Example pages</span>
                <i class='icon-angle-down angle-down'></i>
              </a>
              <ul class='nav nav-stacked'>
                <li class=''>
                  <a href='invoice.html'>
                    <i class='icon-money'></i>
                    <span>Invoice</span>
                  </a>
                </li>
                <li class=''>
                  <a href='gallery.html'>
                    <i class='icon-picture'></i>
                    <span>Gallery</span>
                  </a>
                </li>
                <li class=''>
                  <a href='timeline.html'>
                    <i class='icon-time'></i>
                    <span>Timeline</span>
                  </a>
                </li>
                <li class=''>
                  <a href='pricing_tables.html'>
                    <i class='icon-table'></i>
                    <span>Pricing tables</span>
                  </a>
                </li>
                <li class=''>
                  <a href='user_profile.html'>
                    <i class='icon-user'></i>
                    <span>User profile</span>
                  </a>
                </li>
                <li class=''>
                  <a href='err404.html' target='_blank'>
                    <i class='icon-question-sign'></i>
                    <span>404 Error</span>
                  </a>
                </li>
                <li class=''>
                  <a href='err500.html' target='_blank'>
                    <i class='icon-cogs'></i>
                    <span>500 Error</span>
                  </a>
                </li>
                <li class=''>
                  <a href='sign_in.html' target='_blank'>
                    <i class='icon-signin'></i>
                    <span>Sign in</span>
                  </a>
                </li>
                <li class=''>
                  <a href='faq.html'>
                    <i class='icon-bullhorn'></i>
                    <span>FAQ</span>
                  </a>
                </li>
                <li class=''>
                  <a href='orders.html'>
                    <i class='icon-inbox'></i>
                    <span>Orders</span>
                  </a>
                </li>
                <li class=''>
                  <a href='search_results.html'>
                    <i class='icon-search'></i>
                    <span>Search results</span>
                  </a>
                </li>
                <li class=''>
                  <a href='blank.html'>
                    <i class='icon-circle-blank'></i>
                    <span>Blank page</span>
                  </a>
                </li>
              </ul>
            </li>
            <li>
              <a class='dropdown-collapse ' href='#'>
                <i class='icon-cog'></i>
                <span>Layouts</span>
                <i class='icon-angle-down angle-down'></i>
              </a>
              <ul class='nav nav-stacked'>
                <li class=''>
                  <a href='closed_navigation.html'>
                    <i class='icon-caret-right'></i>
                    <span>Closed navigation</span>
                  </a>
                </li>
                <li class=''>
                  <a href='fixed_header.html'>
                    <i class='icon-caret-right'></i>
                    <span>Fixed header</span>
                  </a>
                </li>
                <li class=''>
                  <a href='fixed_navigation.html'>
                    <i class='icon-caret-right'></i>
                    <span>Fixed navigation</span>
                  </a>
                </li>
                <li class=''>
                  <a href='fixed_navigation_and_header.html'>
                    <i class='icon-caret-right'></i>
                    <span>Fixed navigation & header</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class=''>
              <a href='email_templates.html'>
                <i class='icon-mail-reply'></i>
                <span>Email templates</span>
              </a>
            </li>
            <li>
              <a class='dropdown-collapse' href='#'>
                <i class='icon-folder-open-alt'></i>
                <span>Four level dropdown</span>
                <i class='icon-angle-down angle-down'></i>
              </a>
              <ul class='nav nav-stacked'>
                <li>
                  <a class='dropdown-collapse' href='#'>
                    <i class='icon-caret-right'></i>
                    <span>Second level</span>
                    <i class='icon-angle-down angle-down'></i>
                  </a>
                  <ul class='nav nav-stacked'>
                    <li>
                      <a class='dropdown-collapse' href='#'>
                        <i class='icon-caret-right'></i>
                        <span>Third level</span>
                        <i class='icon-angle-down angle-down'></i>
                      </a>
                      <ul class='nav nav-stacked'>
                        <li>
                          <a href='#'>
                            <i class='icon-caret-right'></i>
                            <span>Fourth level</span>
                          </a>
                        </li>
                        <li>
                          <a href='#'>
                            <i class='icon-caret-right'></i>
                            <span>Another fourth level</span>
                          </a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </nav>
      <section id='content'>
        <div class='container'>
          <div class='row' id='content-wrapper'>
            <div class='col-xs-12'>
              <div class='row'>
                <div class='col-sm-12'>
                  <div class='page-header'>
                    <h1 class='pull-left'>
                      <i class='icon-table'></i>
                      <span>Tables</span>
                    </h1>
                    <div class='pull-right'>
                      <ul class='breadcrumb'>
                        <li>
                          <a href='index.html'>
                            <i class='icon-bar-chart'></i>
                          </a>
                        </li>
                        <li class='separator'>
                          <i class='icon-angle-right'></i>
                        </li>
                        <li class='active'>Tables</li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
              <div class='row'>
                <div class='col-sm-12'>
                  <div class='box bordered-box blue-border' style='margin-bottom:0;'>
                    <div class='box-header blue-background'>
                      <div class='title'>Responsive table</div>
                      <div class='actions'>
                        <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                        </a>
                        
                        <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                        </a>
                      </div>
                    </div>
                    <div class='box-content box-no-padding'>
                      <div class='responsive-table'>
                        <div class='scrollable-area'>
                          <table class='table' style='margin-bottom:0;'>
                            <thead>
                              <tr>
                                <th>
                                  Name
                                </th>
                                <th>
                                  E-mail
                                </th>
                                <th>
                                  Status
                                </th>
                                <th></th>
                              </tr>
                            </thead>
                            <tbody>
                              <tr>
                                <td>Zelma Langosh</td>
                                <td>berta@hotmail.com</td>
                                <td>
                                  <span class='label label-important'>Important</span>
                                </td>
                                <td>
                                  <div class='text-right'>
                                    <a class='btn btn-success btn-xs' href='#'>
                                      <i class='icon-ok'></i>
                                    </a>
                                    <a class='btn btn-danger btn-xs' href='#'>
                                      <i class='icon-remove'></i>
                                    </a>
                                  </div>
                                </td>
                              </tr>
                              <tr>
                                <td>Jackson Yundt</td>
                                <td>seth@yahoo.com</td>
                                <td>
                                  <span class='label label-success'>Success</span>
                                </td>
                                <td>
                                  <div class='text-right'>
                                    <a class='btn btn-success btn-xs' href='#'>
                                      <i class='icon-ok'></i>
                                    </a>
                                    <a class='btn btn-danger btn-xs' href='#'>
                                      <i class='icon-remove'></i>
                                    </a>
                                  </div>
                                </td>
                              </tr>
                              <tr>
                                <td>Rey Fadel</td>
                                <td>macey@yahoo.com</td>
                                <td>
                                  <span class='label label-warning'>Warning</span>
                                </td>
                                <td>
                                  <div class='text-right'>
                                    <a class='btn btn-success btn-xs' href='#'>
                                      <i class='icon-ok'></i>
                                    </a>
                                    <a class='btn btn-danger btn-xs' href='#'>
                                      <i class='icon-remove'></i>
                                    </a>
                                  </div>
                                </td>
                              </tr>
                              <tr>
                                <td>Jaquelin Koelpin</td>
                                <td>celia@hotmail.com</td>
                                <td>
                                  <span class='label label-success'>Success</span>
                                </td>
                                <td>
                                  <div class='text-right'>
                                    <a class='btn btn-success btn-xs' href='#'>
                                      <i class='icon-ok'></i>
                                    </a>
                                    <a class='btn btn-danger btn-xs' href='#'>
                                      <i class='icon-remove'></i>
                                    </a>
                                  </div>
                                </td>
                              </tr>
                              <tr>
                                <td>Marco Bogisich</td>
                                <td>cullen@yahoo.com</td>
                                <td>
                                  <span class='label label-important'>Important</span>
                                </td>
                                <td>
                                  <div class='text-right'>
                                    <a class='btn btn-success btn-xs' href='#'>
                                      <i class='icon-ok'></i>
                                    </a>
                                    <a class='btn btn-danger btn-xs' href='#'>
                                      <i class='icon-remove'></i>
                                    </a>
                                  </div>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <hr class='hr-double'>
              <div class='row'>
                <div class='col-sm-12'>
                  <div class='box bordered-box purple-border' style='margin-bottom:0;'>
                    <div class='box-header purple-background'>
                      <div class='title'>Striped non-responsive table</div>
                      <div class='actions'>
                        <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                        </a>
                        
                        <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                        </a>
                      </div>
                    </div>
                    <div class='box-content box-no-padding'>
                      <table class='table table-striped' style='margin-bottom:0;'>
                        <thead>
                          <tr>
                            <th>
                              Name
                            </th>
                            <th>
                              E-mail
                            </th>
                            <th>
                              Status
                            </th>
                            <th></th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <td>Gaylord Reynolds</td>
                            <td>claudie@yahoo.com</td>
                            <td>
                              <span class='label label-warning'>Warning</span>
                            </td>
                            <td>
                              <div class='text-right'>
                                <a class='btn btn-success btn-xs' href='#'>
                                  <i class='icon-ok'></i>
                                </a>
                                <a class='btn btn-danger btn-xs' href='#'>
                                  <i class='icon-remove'></i>
                                </a>
                              </div>
                            </td>
                          </tr>
                          <tr>
                            <td>Dennis Beahan</td>
                            <td>francis@hotmail.com</td>
                            <td>
                              <span class='label label-success'>Success</span>
                            </td>
                            <td>
                              <div class='text-right'>
                                <a class='btn btn-success btn-xs' href='#'>
                                  <i class='icon-ok'></i>
                                </a>
                                <a class='btn btn-danger btn-xs' href='#'>
                                  <i class='icon-remove'></i>
                                </a>
                              </div>
                            </td>
                          </tr>
                          <tr>
                            <td>Pearlie Beahan</td>
                            <td>ellis@hotmail.com</td>
                            <td>
                              <span class='label label-warning'>Warning</span>
                            </td>
                            <td>
                              <div class='text-right'>
                                <a class='btn btn-success btn-xs' href='#'>
                                  <i class='icon-ok'></i>
                                </a>
                                <a class='btn btn-danger btn-xs' href='#'>
                                  <i class='icon-remove'></i>
                                </a>
                              </div>
                            </td>
                          </tr>
                          <tr>
                            <td>Reece Brekke</td>
                            <td>liam@gmail.com</td>
                            <td>
                              <span class='label label-warning'>Warning</span>
                            </td>
                            <td>
                              <div class='text-right'>
                                <a class='btn btn-success btn-xs' href='#'>
                                  <i class='icon-ok'></i>
                                </a>
                                <a class='btn btn-danger btn-xs' href='#'>
                                  <i class='icon-remove'></i>
                                </a>
                              </div>
                            </td>
                          </tr>
                          <tr>
                            <td>Green Kuhlman</td>
                            <td>sarina@yahoo.com</td>
                            <td>
                              <span class='label label-success'>Success</span>
                            </td>
                            <td>
                              <div class='text-right'>
                                <a class='btn btn-success btn-xs' href='#'>
                                  <i class='icon-ok'></i>
                                </a>
                                <a class='btn btn-danger btn-xs' href='#'>
                                  <i class='icon-remove'></i>
                                </a>
                              </div>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
              <hr class='hr-double'>
              <div class='row'>
                <div class='col-sm-12'>
                  <div class='box bordered-box red-border' style='margin-bottom:0;'>
                    <div class='box-header red-background'>
                      <div class='title'>Striped and hovered table</div>
                      <div class='actions'>
                        <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                        </a>
                        
                        <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                        </a>
                      </div>
                    </div>
                    <div class='box-content box-no-padding'>
                      <div class='responsive-table'>
                        <div class='scrollable-area'>
                          <table class='table table-hover table-striped' style='margin-bottom:0;'>
                            <thead>
                              <tr>
                                <th>
                                  Name
                                </th>
                                <th>
                                  E-mail
                                </th>
                                <th>
                                  Status
                                </th>
                                <th></th>
                              </tr>
                            </thead>
                            <tbody>
                              <tr>
                                <td>Hillard Metz</td>
                                <td>elinor@gmail.com</td>
                                <td>
                                  <span class='label label-important'>Important</span>
                                </td>
                                <td>
                                  <div class='text-right'>
                                    <a class='btn btn-success btn-xs' href='#'>
                                      <i class='icon-ok'></i>
                                    </a>
                                    <a class='btn btn-danger btn-xs' href='#'>
                                      <i class='icon-remove'></i>
                                    </a>
                                  </div>
                                </td>
                              </tr>
                              <tr>
                                <td>Conner Powlowski</td>
                                <td>jamir@yahoo.com</td>
                                <td>
                                  <span class='label label-warning'>Warning</span>
                                </td>
                                <td>
                                  <div class='text-right'>
                                    <a class='btn btn-success btn-xs' href='#'>
                                      <i class='icon-ok'></i>
                                    </a>
                                    <a class='btn btn-danger btn-xs' href='#'>
                                      <i class='icon-remove'></i>
                                    </a>
                                  </div>
                                </td>
                              </tr>
                              <tr>
                                <td>Christelle Goodwin</td>
                                <td>kailyn@yahoo.com</td>
                                <td>
                                  <span class='label label-important'>Important</span>
                                </td>
                                <td>
                                  <div class='text-right'>
                                    <a class='btn btn-success btn-xs' href='#'>
                                      <i class='icon-ok'></i>
                                    </a>
                                    <a class='btn btn-danger btn-xs' href='#'>
                                      <i class='icon-remove'></i>
                                    </a>
                                  </div>
                                </td>
                              </tr>
                              <tr>
                                <td>Pansy McCullough</td>
                                <td>alexzander@yahoo.com</td>
                                <td>
                                  <span class='label label-success'>Success</span>
                                </td>
                                <td>
                                  <div class='text-right'>
                                    <a class='btn btn-success btn-xs' href='#'>
                                      <i class='icon-ok'></i>
                                    </a>
                                    <a class='btn btn-danger btn-xs' href='#'>
                                      <i class='icon-remove'></i>
                                    </a>
                                  </div>
                                </td>
                              </tr>
                              <tr>
                                <td>Coralie Raynor</td>
                                <td>nicolas@gmail.com</td>
                                <td>
                                  <span class='label label-success'>Success</span>
                                </td>
                                <td>
                                  <div class='text-right'>
                                    <a class='btn btn-success btn-xs' href='#'>
                                      <i class='icon-ok'></i>
                                    </a>
                                    <a class='btn btn-danger btn-xs' href='#'>
                                      <i class='icon-remove'></i>
                                    </a>
                                  </div>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <hr class='hr-double'>
              <div class='row'>
                <div class='col-sm-12'>
                  <div class='box bordered-box green-border' style='margin-bottom:0;'>
                    <div class='box-header green-background'>
                      <div class='title'>Striped, hovered and bordered table</div>
                      <div class='actions'>
                        <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                        </a>
                        
                        <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                        </a>
                      </div>
                    </div>
                    <div class='box-content box-no-padding'>
                      <div class='responsive-table'>
                        <div class='scrollable-area'>
                          <table class='table table-bordered table-hover table-striped' style='margin-bottom:0;'>
                            <thead>
                              <tr>
                                <th>
                                  Name
                                </th>
                                <th>
                                  E-mail
                                </th>
                                <th>
                                  Status
                                </th>
                                <th></th>
                              </tr>
                            </thead>
                            <tbody>
                              <tr>
                                <td>Mara Pfeffer</td>
                                <td>holly@yahoo.com</td>
                                <td>
                                  <span class='label label-success'>Success</span>
                                </td>
                                <td>
                                  <div class='text-right'>
                                    <a class='btn btn-success btn-xs' href='#'>
                                      <i class='icon-ok'></i>
                                    </a>
                                    <a class='btn btn-danger btn-xs' href='#'>
                                      <i class='icon-remove'></i>
                                    </a>
                                  </div>
                                </td>
                              </tr>
                              <tr>
                                <td>Cristian Farrell</td>
                                <td>grace@yahoo.com</td>
                                <td>
                                  <span class='label label-important'>Important</span>
                                </td>
                                <td>
                                  <div class='text-right'>
                                    <a class='btn btn-success btn-xs' href='#'>
                                      <i class='icon-ok'></i>
                                    </a>
                                    <a class='btn btn-danger btn-xs' href='#'>
                                      <i class='icon-remove'></i>
                                    </a>
                                  </div>
                                </td>
                              </tr>
                              <tr>
                                <td>Gordon Effertz</td>
                                <td>esta@yahoo.com</td>
                                <td>
                                  <span class='label label-warning'>Warning</span>
                                </td>
                                <td>
                                  <div class='text-right'>
                                    <a class='btn btn-success btn-xs' href='#'>
                                      <i class='icon-ok'></i>
                                    </a>
                                    <a class='btn btn-danger btn-xs' href='#'>
                                      <i class='icon-remove'></i>
                                    </a>
                                  </div>
                                </td>
                              </tr>
                              <tr>
                                <td>Karli Senger</td>
                                <td>joannie@yahoo.com</td>
                                <td>
                                  <span class='label label-important'>Important</span>
                                </td>
                                <td>
                                  <div class='text-right'>
                                    <a class='btn btn-success btn-xs' href='#'>
                                      <i class='icon-ok'></i>
                                    </a>
                                    <a class='btn btn-danger btn-xs' href='#'>
                                      <i class='icon-remove'></i>
                                    </a>
                                  </div>
                                </td>
                              </tr>
                              <tr>
                                <td>Linnea Kuhn</td>
                                <td>deven@yahoo.com</td>
                                <td>
                                  <span class='label label-success'>Success</span>
                                </td>
                                <td>
                                  <div class='text-right'>
                                    <a class='btn btn-success btn-xs' href='#'>
                                      <i class='icon-ok'></i>
                                    </a>
                                    <a class='btn btn-danger btn-xs' href='#'>
                                      <i class='icon-remove'></i>
                                    </a>
                                  </div>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class='group-header'>
                <div class='row'>
                  <div class='col-sm-6 col-sm-offset-3'>
                    <div class='text-center'>
                      <h2>Dynamic tables</h2>
                      <small class='text-muted'>Dynamic datables can handle large data collections, sorting, filtering...</small>
                    </div>
                  </div>
                </div>
              </div>
              <div class='row'>
                <div class='col-sm-12'>
                  <div class='box bordered-box orange-border' style='margin-bottom:0;'>
                    <div class='box-header orange-background'>
                      <div class='title'>Sortable data table with pagination</div>
                      <div class='actions'>
                        <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                        </a>
                        
                        <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                        </a>
                      </div>
                    </div>
                    <div class='box-content box-no-padding'>
                      <div class='responsive-table'>
                        <div class='scrollable-area'>
                          <table class='data-table table table-bordered table-striped' style='margin-bottom:0;'>
                            <thead>
                              <tr>
                                <th>
                                  Name
                                </th>
                                <th>
                                  E-mail
                                </th>
                                <th>
                                  Status
                                </th>
                                <th></th>
                              </tr>
                            </thead>
                            <tbody>
                              <tr>
                                <td>Janick Williamson</td>
                                <td>johnson@yahoo.com</td>
                                <td>
                                  <span class='label label-important'>Important</span>
                                </td>
                                <td>
                                  <div class='text-right'>
                                    <a class='btn btn-success btn-xs' href='#'>
                                      <i class='icon-ok'></i>
                                    </a>
                                    <a class='btn btn-danger btn-xs' href='#'>
                                      <i class='icon-remove'></i>
                                    </a>
                                  </div>
                                </td>
                              </tr>
                              <tr>
                                <td>Javonte Sipes</td>
                                <td>reina@gmail.com</td>
                                <td>
                                  <span class='label label-success'>Success</span>
                                </td>
                                <td>
                                  <div class='text-right'>
                                    <a class='btn btn-success btn-xs' href='#'>
                                      <i class='icon-ok'></i>
                                    </a>
                                    <a class='btn btn-danger btn-xs' href='#'>
                                      <i class='icon-remove'></i>
                                    </a>
                                  </div>
                                </td>
                              </tr>
                              <tr>
                                <td>Lottie Cormier</td>
                                <td>mattie@gmail.com</td>
                                <td>
                                  <span class='label label-success'>Success</span>
                                </td>
                                <td>
                                  <div class='text-right'>
                                    <a class='btn btn-success btn-xs' href='#'>
                                      <i class='icon-ok'></i>
                                    </a>
                                    <a class='btn btn-danger btn-xs' href='#'>
                                      <i class='icon-remove'></i>
                                    </a>
                                  </div>
                                </td>
                              </tr>
                              <tr>
                                <td>Madelyn Senger</td>
                                <td>harmon@hotmail.com</td>
                                <td>
                                  <span class='label label-success'>Success</span>
                                </td>
                                <td>
                                  <div class='text-right'>
                                    <a class='btn btn-success btn-xs' href='#'>
                                      <i class='icon-ok'></i>
                                    </a>
                                    <a class='btn btn-danger btn-xs' href='#'>
                                      <i class='icon-remove'></i>
                                    </a>
                                  </div>
                                </td>
                              </tr>
                              <tr>
                                <td>Elenora Dickinson</td>
                                <td>yasmine@yahoo.com</td>
                                <td>
                                  <span class='label label-important'>Important</span>
                                </td>
                                <td>
                                  <div class='text-right'>
                                    <a class='btn btn-success btn-xs' href='#'>
                                      <i class='icon-ok'></i>
                                    </a>
                                    <a class='btn btn-danger btn-xs' href='#'>
                                      <i class='icon-remove'></i>
                                    </a>
                                  </div>
                                </td>
                              </tr>
                              <tr>
                                <td>Cristina Wilderman</td>
                                <td>loraine@hotmail.com</td>
                                <td>
                                  <span class='label label-important'>Important</span>
                                </td>
                                <td>
                                  <div class='text-right'>
                                    <a class='btn btn-success btn-xs' href='#'>
                                      <i class='icon-ok'></i>
                                    </a>
                                    <a class='btn btn-danger btn-xs' href='#'>
                                      <i class='icon-remove'></i>
                                    </a>
                                  </div>
                                </td>
                              </tr>
                              <tr>
                                <td>Lucinda Bradtke</td>
                                <td>carlee@gmail.com</td>
                                <td>
                                  <span class='label label-warning'>Warning</span>
                                </td>
                                <td>
                                  <div class='text-right'>
                                    <a class='btn btn-success btn-xs' href='#'>
                                      <i class='icon-ok'></i>
                                    </a>
                                    <a class='btn btn-danger btn-xs' href='#'>
                                      <i class='icon-remove'></i>
                                    </a>
                                  </div>
                                </td>
                              </tr>
                              <tr>
                                <td>Leilani Stark</td>
                                <td>wilbert@gmail.com</td>
                                <td>
                                  <span class='label label-important'>Important</span>
                                </td>
                                <td>
                                  <div class='text-right'>
                                    <a class='btn btn-success btn-xs' href='#'>
                                      <i class='icon-ok'></i>
                                    </a>
                                    <a class='btn btn-danger btn-xs' href='#'>
                                      <i class='icon-remove'></i>
                                    </a>
                                  </div>
                                </td>
                              </tr>
                              <tr>
                                <td>Dasia Padberg</td>
                                <td>lucius@yahoo.com</td>
                                <td>
                                  <span class='label label-warning'>Warning</span>
                                </td>
                                <td>
                                  <div class='text-right'>
                                    <a class='btn btn-success btn-xs' href='#'>
                                      <i class='icon-ok'></i>
                                    </a>
                                    <a class='btn btn-danger btn-xs' href='#'>
                                      <i class='icon-remove'></i>
                                    </a>
                                  </div>
                                </td>
                              </tr>
                              <tr>
                                <td>Fanny Pollich</td>
                                <td>sylvia@hotmail.com</td>
                                <td>
                                  <span class='label label-success'>Success</span>
                                </td>
                                <td>
                                  <div class='text-right'>
                                    <a class='btn btn-success btn-xs' href='#'>
                                      <i class='icon-ok'></i>
                                    </a>
                                    <a class='btn btn-danger btn-xs' href='#'>
                                      <i class='icon-remove'></i>
                                    </a>
                                  </div>
                                </td>
                              </tr>
                              <tr>
                                <td>Vergie Jacobson</td>
                                <td>layla@gmail.com</td>
                                <td>
                                  <span class='label label-warning'>Warning</span>
                                </td>
                                <td>
                                  <div class='text-right'>
                                    <a class='btn btn-success btn-xs' href='#'>
                                      <i class='icon-ok'></i>
                                    </a>
                                    <a class='btn btn-danger btn-xs' href='#'>
                                      <i class='icon-remove'></i>
                                    </a>
                                  </div>
                                </td>
                              </tr>
                              <tr>
                                <td>Macie Price</td>
                                <td>myriam@gmail.com</td>
                                <td>
                                  <span class='label label-warning'>Warning</span>
                                </td>
                                <td>
                                  <div class='text-right'>
                                    <a class='btn btn-success btn-xs' href='#'>
                                      <i class='icon-ok'></i>
                                    </a>
                                    <a class='btn btn-danger btn-xs' href='#'>
                                      <i class='icon-remove'></i>
                                    </a>
                                  </div>
                                </td>
                              </tr>
                              <tr>
                                <td>Annamarie Bauch</td>
                                <td>don@yahoo.com</td>
                                <td>
                                  <span class='label label-important'>Important</span>
                                </td>
                                <td>
                                  <div class='text-right'>
                                    <a class='btn btn-success btn-xs' href='#'>
                                      <i class='icon-ok'></i>
                                    </a>
                                    <a class='btn btn-danger btn-xs' href='#'>
                                      <i class='icon-remove'></i>
                                    </a>
                                  </div>
                                </td>
                              </tr>
                              <tr>
                                <td>Brandy Romaguera</td>
                                <td>boris@gmail.com</td>
                                <td>
                                  <span class='label label-important'>Important</span>
                                </td>
                                <td>
                                  <div class='text-right'>
                                    <a class='btn btn-success btn-xs' href='#'>
                                      <i class='icon-ok'></i>
                                    </a>
                                    <a class='btn btn-danger btn-xs' href='#'>
                                      <i class='icon-remove'></i>
                                    </a>
                                  </div>
                                </td>
                              </tr>
                              <tr>
                                <td>Jarret Schmidt</td>
                                <td>jimmie@yahoo.com</td>
                                <td>
                                  <span class='label label-warning'>Warning</span>
                                </td>
                                <td>
                                  <div class='text-right'>
                                    <a class='btn btn-success btn-xs' href='#'>
                                      <i class='icon-ok'></i>
                                    </a>
                                    <a class='btn btn-danger btn-xs' href='#'>
                                      <i class='icon-remove'></i>
                                    </a>
                                  </div>
                                </td>
                              </tr>
                              <tr>
                                <td>Mckenna Ondricka</td>
                                <td>katelin@gmail.com</td>
                                <td>
                                  <span class='label label-important'>Important</span>
                                </td>
                                <td>
                                  <div class='text-right'>
                                    <a class='btn btn-success btn-xs' href='#'>
                                      <i class='icon-ok'></i>
                                    </a>
                                    <a class='btn btn-danger btn-xs' href='#'>
                                      <i class='icon-remove'></i>
                                    </a>
                                  </div>
                                </td>
                              </tr>
                              <tr>
                                <td>Adelbert Ullrich</td>
                                <td>joyce@hotmail.com</td>
                                <td>
                                  <span class='label label-warning'>Warning</span>
                                </td>
                                <td>
                                  <div class='text-right'>
                                    <a class='btn btn-success btn-xs' href='#'>
                                      <i class='icon-ok'></i>
                                    </a>
                                    <a class='btn btn-danger btn-xs' href='#'>
                                      <i class='icon-remove'></i>
                                    </a>
                                  </div>
                                </td>
                              </tr>
                              <tr>
                                <td>Celia Wuckert</td>
                                <td>jermaine@hotmail.com</td>
                                <td>
                                  <span class='label label-success'>Success</span>
                                </td>
                                <td>
                                  <div class='text-right'>
                                    <a class='btn btn-success btn-xs' href='#'>
                                      <i class='icon-ok'></i>
                                    </a>
                                    <a class='btn btn-danger btn-xs' href='#'>
                                      <i class='icon-remove'></i>
                                    </a>
                                  </div>
                                </td>
                              </tr>
                              <tr>
                                <td>Patsy Botsford</td>
                                <td>romaine@gmail.com</td>
                                <td>
                                  <span class='label label-warning'>Warning</span>
                                </td>
                                <td>
                                  <div class='text-right'>
                                    <a class='btn btn-success btn-xs' href='#'>
                                      <i class='icon-ok'></i>
                                    </a>
                                    <a class='btn btn-danger btn-xs' href='#'>
                                      <i class='icon-remove'></i>
                                    </a>
                                  </div>
                                </td>
                              </tr>
                              <tr>
                                <td>Rey Mante</td>
                                <td>aylin@gmail.com</td>
                                <td>
                                  <span class='label label-success'>Success</span>
                                </td>
                                <td>
                                  <div class='text-right'>
                                    <a class='btn btn-success btn-xs' href='#'>
                                      <i class='icon-ok'></i>
                                    </a>
                                    <a class='btn btn-danger btn-xs' href='#'>
                                      <i class='icon-remove'></i>
                                    </a>
                                  </div>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <hr class='hr-double'>
              <div class='row'>
                <div class='col-sm-12'>
                  <div class='box bordered-box orange-border' style='margin-bottom:0;'>
                    <div class='box-header purple-background'>
                      <div class='title'>Data table with column filter in footer</div>
                      <div class='actions'>
                        <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                        </a>
                        
                        <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                        </a>
                      </div>
                    </div>
                    <div class='box-content box-no-padding'>
                      <div class='responsive-table'>
                        <div class='scrollable-area'>
                          <table class='data-table-column-filter table table-bordered table-striped' style='margin-bottom:0;'>
                            <thead>
                              <tr>
                                <th>
                                  Name
                                </th>
                                <th>
                                  E-mail
                                </th>
                                <th>
                                  Status
                                </th>
                                <th></th>
                              </tr>
                            </thead>
                            <tbody>
                              <tr>
                                <td>Gabrielle Fritsch</td>
                                <td>marjory@gmail.com</td>
                                <td>
                                  <span class='label label-warning'>Warning</span>
                                </td>
                                <td>
                                  <div class='text-right'>
                                    <a class='btn btn-success btn-xs' href='#'>
                                      <i class='icon-ok'></i>
                                    </a>
                                    <a class='btn btn-danger btn-xs' href='#'>
                                      <i class='icon-remove'></i>
                                    </a>
                                  </div>
                                </td>
                              </tr>
                              <tr>
                                <td>Adaline Bins</td>
                                <td>jesus@yahoo.com</td>
                                <td>
                                  <span class='label label-important'>Important</span>
                                </td>
                                <td>
                                  <div class='text-right'>
                                    <a class='btn btn-success btn-xs' href='#'>
                                      <i class='icon-ok'></i>
                                    </a>
                                    <a class='btn btn-danger btn-xs' href='#'>
                                      <i class='icon-remove'></i>
                                    </a>
                                  </div>
                                </td>
                              </tr>
                              <tr>
                                <td>Ansel Schimmel</td>
                                <td>henri@gmail.com</td>
                                <td>
                                  <span class='label label-important'>Important</span>
                                </td>
                                <td>
                                  <div class='text-right'>
                                    <a class='btn btn-success btn-xs' href='#'>
                                      <i class='icon-ok'></i>
                                    </a>
                                    <a class='btn btn-danger btn-xs' href='#'>
                                      <i class='icon-remove'></i>
                                    </a>
                                  </div>
                                </td>
                              </tr>
                              <tr>
                                <td>Leland Kertzmann</td>
                                <td>lavina@hotmail.com</td>
                                <td>
                                  <span class='label label-important'>Important</span>
                                </td>
                                <td>
                                  <div class='text-right'>
                                    <a class='btn btn-success btn-xs' href='#'>
                                      <i class='icon-ok'></i>
                                    </a>
                                    <a class='btn btn-danger btn-xs' href='#'>
                                      <i class='icon-remove'></i>
                                    </a>
                                  </div>
                                </td>
                              </tr>
                              <tr>
                                <td>Cameron Lang</td>
                                <td>octavia@yahoo.com</td>
                                <td>
                                  <span class='label label-success'>Success</span>
                                </td>
                                <td>
                                  <div class='text-right'>
                                    <a class='btn btn-success btn-xs' href='#'>
                                      <i class='icon-ok'></i>
                                    </a>
                                    <a class='btn btn-danger btn-xs' href='#'>
                                      <i class='icon-remove'></i>
                                    </a>
                                  </div>
                                </td>
                              </tr>
                              <tr>
                                <td>Santina Satterfield</td>
                                <td>maximillia@gmail.com</td>
                                <td>
                                  <span class='label label-warning'>Warning</span>
                                </td>
                                <td>
                                  <div class='text-right'>
                                    <a class='btn btn-success btn-xs' href='#'>
                                      <i class='icon-ok'></i>
                                    </a>
                                    <a class='btn btn-danger btn-xs' href='#'>
                                      <i class='icon-remove'></i>
                                    </a>
                                  </div>
                                </td>
                              </tr>
                              <tr>
                                <td>Marlene Harris</td>
                                <td>violette@gmail.com</td>
                                <td>
                                  <span class='label label-warning'>Warning</span>
                                </td>
                                <td>
                                  <div class='text-right'>
                                    <a class='btn btn-success btn-xs' href='#'>
                                      <i class='icon-ok'></i>
                                    </a>
                                    <a class='btn btn-danger btn-xs' href='#'>
                                      <i class='icon-remove'></i>
                                    </a>
                                  </div>
                                </td>
                              </tr>
                              <tr>
                                <td>Tatum Nolan</td>
                                <td>marianna@gmail.com</td>
                                <td>
                                  <span class='label label-warning'>Warning</span>
                                </td>
                                <td>
                                  <div class='text-right'>
                                    <a class='btn btn-success btn-xs' href='#'>
                                      <i class='icon-ok'></i>
                                    </a>
                                    <a class='btn btn-danger btn-xs' href='#'>
                                      <i class='icon-remove'></i>
                                    </a>
                                  </div>
                                </td>
                              </tr>
                              <tr>
                                <td>Isidro Kihn</td>
                                <td>eloisa@gmail.com</td>
                                <td>
                                  <span class='label label-success'>Success</span>
                                </td>
                                <td>
                                  <div class='text-right'>
                                    <a class='btn btn-success btn-xs' href='#'>
                                      <i class='icon-ok'></i>
                                    </a>
                                    <a class='btn btn-danger btn-xs' href='#'>
                                      <i class='icon-remove'></i>
                                    </a>
                                  </div>
                                </td>
                              </tr>
                              <tr>
                                <td>Isidro Walsh</td>
                                <td>rod@gmail.com</td>
                                <td>
                                  <span class='label label-success'>Success</span>
                                </td>
                                <td>
                                  <div class='text-right'>
                                    <a class='btn btn-success btn-xs' href='#'>
                                      <i class='icon-ok'></i>
                                    </a>
                                    <a class='btn btn-danger btn-xs' href='#'>
                                      <i class='icon-remove'></i>
                                    </a>
                                  </div>
                                </td>
                              </tr>
                              <tr>
                                <td>King Steuber</td>
                                <td>sarah@gmail.com</td>
                                <td>
                                  <span class='label label-success'>Success</span>
                                </td>
                                <td>
                                  <div class='text-right'>
                                    <a class='btn btn-success btn-xs' href='#'>
                                      <i class='icon-ok'></i>
                                    </a>
                                    <a class='btn btn-danger btn-xs' href='#'>
                                      <i class='icon-remove'></i>
                                    </a>
                                  </div>
                                </td>
                              </tr>
                              <tr>
                                <td>Anastasia Schuppe</td>
                                <td>nona@hotmail.com</td>
                                <td>
                                  <span class='label label-warning'>Warning</span>
                                </td>
                                <td>
                                  <div class='text-right'>
                                    <a class='btn btn-success btn-xs' href='#'>
                                      <i class='icon-ok'></i>
                                    </a>
                                    <a class='btn btn-danger btn-xs' href='#'>
                                      <i class='icon-remove'></i>
                                    </a>
                                  </div>
                                </td>
                              </tr>
                              <tr>
                                <td>Laurie Wehner</td>
                                <td>mona@yahoo.com</td>
                                <td>
                                  <span class='label label-important'>Important</span>
                                </td>
                                <td>
                                  <div class='text-right'>
                                    <a class='btn btn-success btn-xs' href='#'>
                                      <i class='icon-ok'></i>
                                    </a>
                                    <a class='btn btn-danger btn-xs' href='#'>
                                      <i class='icon-remove'></i>
                                    </a>
                                  </div>
                                </td>
                              </tr>
                              <tr>
                                <td>Titus Marvin</td>
                                <td>grayson@gmail.com</td>
                                <td>
                                  <span class='label label-warning'>Warning</span>
                                </td>
                                <td>
                                  <div class='text-right'>
                                    <a class='btn btn-success btn-xs' href='#'>
                                      <i class='icon-ok'></i>
                                    </a>
                                    <a class='btn btn-danger btn-xs' href='#'>
                                      <i class='icon-remove'></i>
                                    </a>
                                  </div>
                                </td>
                              </tr>
                              <tr>
                                <td>Myles Reichel</td>
                                <td>yadira@hotmail.com</td>
                                <td>
                                  <span class='label label-warning'>Warning</span>
                                </td>
                                <td>
                                  <div class='text-right'>
                                    <a class='btn btn-success btn-xs' href='#'>
                                      <i class='icon-ok'></i>
                                    </a>
                                    <a class='btn btn-danger btn-xs' href='#'>
                                      <i class='icon-remove'></i>
                                    </a>
                                  </div>
                                </td>
                              </tr>
                              <tr>
                                <td>Luisa Torp</td>
                                <td>ruby@gmail.com</td>
                                <td>
                                  <span class='label label-success'>Success</span>
                                </td>
                                <td>
                                  <div class='text-right'>
                                    <a class='btn btn-success btn-xs' href='#'>
                                      <i class='icon-ok'></i>
                                    </a>
                                    <a class='btn btn-danger btn-xs' href='#'>
                                      <i class='icon-remove'></i>
                                    </a>
                                  </div>
                                </td>
                              </tr>
                              <tr>
                                <td>Mable Smith</td>
                                <td>jovanny@hotmail.com</td>
                                <td>
                                  <span class='label label-warning'>Warning</span>
                                </td>
                                <td>
                                  <div class='text-right'>
                                    <a class='btn btn-success btn-xs' href='#'>
                                      <i class='icon-ok'></i>
                                    </a>
                                    <a class='btn btn-danger btn-xs' href='#'>
                                      <i class='icon-remove'></i>
                                    </a>
                                  </div>
                                </td>
                              </tr>
                              <tr>
                                <td>Fabian Stracke</td>
                                <td>brenda@yahoo.com</td>
                                <td>
                                  <span class='label label-important'>Important</span>
                                </td>
                                <td>
                                  <div class='text-right'>
                                    <a class='btn btn-success btn-xs' href='#'>
                                      <i class='icon-ok'></i>
                                    </a>
                                    <a class='btn btn-danger btn-xs' href='#'>
                                      <i class='icon-remove'></i>
                                    </a>
                                  </div>
                                </td>
                              </tr>
                              <tr>
                                <td>Omer Hudson</td>
                                <td>aniya@hotmail.com</td>
                                <td>
                                  <span class='label label-success'>Success</span>
                                </td>
                                <td>
                                  <div class='text-right'>
                                    <a class='btn btn-success btn-xs' href='#'>
                                      <i class='icon-ok'></i>
                                    </a>
                                    <a class='btn btn-danger btn-xs' href='#'>
                                      <i class='icon-remove'></i>
                                    </a>
                                  </div>
                                </td>
                              </tr>
                              <tr>
                                <td>Maverick Pagac</td>
                                <td>rocio@gmail.com</td>
                                <td>
                                  <span class='label label-success'>Success</span>
                                </td>
                                <td>
                                  <div class='text-right'>
                                    <a class='btn btn-success btn-xs' href='#'>
                                      <i class='icon-ok'></i>
                                    </a>
                                    <a class='btn btn-danger btn-xs' href='#'>
                                      <i class='icon-remove'></i>
                                    </a>
                                  </div>
                                </td>
                              </tr>
                            </tbody>
                            <tfoot>
                              <tr>
                                <th>Name</th>
                                <th>E-mail</th>
                                <th colspan='2'>Status</th>
                              </tr>
                            </tfoot>
                          </table>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <footer id='footer'>
            <div class='footer-wrapper'>
              <div class='row'>
                <div class='col-sm-6 text'>
                  Copyright © 2013 Your Project Name
                </div>
                <div class='col-sm-6 buttons'>
                  <a class="btn btn-link" href="http://www.bublinastudio.com/flatty">Preview</a>
                  <a class="btn btn-link" href="https://wrapbootstrap.com/theme/flatty-flat-administration-template-WB0P6NR1N">Purchase</a>
                </div>
              </div>
            </div>
          </footer>
        </div>
      </section>
    </div>
    <!-- / jquery [required] -->
    <script src="assets/javascripts/jquery/jquery.min.js" type="text/javascript"></script>
    <!-- / jquery mobile (for touch events) -->
    <script src="assets/javascripts/jquery/jquery.mobile.custom.min.js" type="text/javascript"></script>
    <!-- / jquery migrate (for compatibility with new jquery) [required] -->
    <script src="assets/javascripts/jquery/jquery-migrate.min.js" type="text/javascript"></script>
    <!-- / jquery ui -->
    <script src="assets/javascripts/jquery/jquery-ui.min.js" type="text/javascript"></script>
    <!-- / jQuery UI Touch Punch -->
    <script src="assets/javascripts/plugins/jquery_ui_touch_punch/jquery.ui.touch-punch.min.js" type="text/javascript"></script>
    <!-- / bootstrap [required] -->
    <script src="assets/javascripts/bootstrap/bootstrap.js" type="text/javascript"></script>
    <!-- / modernizr -->
    <script src="assets/javascripts/plugins/modernizr/modernizr.min.js" type="text/javascript"></script>
    <!-- / retina -->
    <script src="assets/javascripts/plugins/retina/retina.js" type="text/javascript"></script>
    <!-- / theme file [required] -->
    <script src="assets/javascripts/theme.js" type="text/javascript"></script>
    <!-- / demo file [not required!] -->
    <script src="assets/javascripts/demo.js" type="text/javascript"></script>
    <!-- / START - page related files and scripts [optional] -->
    <script src="assets/javascripts/plugins/datatables/jquery.dataTables.min.js" type="text/javascript"></script>
    <script src="assets/javascripts/plugins/datatables/jquery.dataTables.columnFilter.js" type="text/javascript"></script>
    <script src="assets/javascripts/plugins/datatables/dataTables.overrides.js" type="text/javascript"></script>
    <!-- / END - page related files and scripts [optional] -->
  </body>
</html>
